import React, { useEffect, useState } from "react";
import { getDashboardData } from "@/services/dashboard"
import { Statistic, Card, Row, Col } from 'antd';

const Dashboard: React.FC = () => {
  // 响应式绑定
  let [data, setData] = useState({})

  // useEffect 监听对象为空数组时不需要重复执行
  useEffect(() => {
    // 获取数据并绑定组件状态
    getDashboardData().then(res => {
      setData(res);
    });
  }, [])

  return (
    <div>
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="用户数"
              value={data.users_count}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="商品数"
              value={data.goods_count}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="订单数"
              value={data.order_count}
              valueStyle={{ color: '#234abc' }}
            />
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default Dashboard
